<template>
  <div ref="chart"
       class="chart">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
      cityProductionList: [{
        name: '云浮罗定',
        value: 75
      }, {
        name: '佛山',
        value: 54
      }, {
        name: '肇庆',
        value: 45
      }
        , {
        name: '广州番禺',
        value: 47
      }, {
        name: '其他',
        value: 65
      }]
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    //统计接口1
    load () {
      this.$nextTick(() => {
        this.drawChart()
      })
    },
    drawChart () {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: 'white' // 设置图例字体颜色为白色
          }
        },
        grid: {
          left: '2%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 'auto',
            showMaxLabel: true
          },
        },
        yAxis: {
          type: 'category',
          data: ['福易厚肉桂产业', '骏达香料', '粤隆实业', '西南肉桂科技', '粤桂实业'],
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval:'auto',
          },
        },
        color: ['#FF5733', '#33FFB5', '#3366FF', '#929732','#235897'], // 可以自定义你喜欢的鲜艳颜色
        series: [
          {
            name: '产量',
            type: 'bar',
            data: [182, 2348, 2903, 10470, 13174]
          },
          {
            name: '销量',
            type: 'bar',
            data: [1932, 23438, 3100, 12194, 14141]
          }
        ]
      }
      myChart.setOption(option);
      //根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);
    }
  }
}
</script>

<style scoped>
.chart {
  width: 25vw;
  height: 50vh;
}
</style>